@import "~pc/styles/lib_var.less";
@import "~pc/styles/lib_mixins.less";
@import "~pc/styles/lib_screen.less";

.uploadContainer {
  width: 100%;
  height: 100%;
  :global {
    .ant-spin-nested-loading,
    .ant-spin-container {
      width: 100%;
      height: 100%;
    }
  }
}

.initPreview {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  &.initBackground {
    background-color: var(--lowestBg);
  }
  
  &.initBorder {
    border: 1px solid var(--lineColor);
    border-radius: 4px;
    overflow: hidden;
  }
}

.coverImgWrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .coverImg {
    display: block;
    object-fit: cover;
    border-radius: 0px;
    width: 100%;
    height: 100%;
    opacity: 1;
    object-position: center 50%;
  }

  .editBtn {
    top: 24px;
    right: 24px;
    svg {
      fill: var(--fc1);
    }
  }

  @media (any-hover: hover) {
    &:hover .editBtn {
      display: flex;
    }
  }
}

.editBtn {
  position: absolute;
  width: 32px;
  height: 32px;
  display: none;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  cursor: pointer;

  &.editBtnMobile {
    display: flex;
  }
}

.logoImgWrapper {
  width: 120px;
  height: 120px;
  background-color: var(--lowestBg);
  cursor: pointer;

  &.logoWrapMobile {
    width: 80px;
    height: 80px;
  }

  &.notEmpty {
    background-color: transparent;
  }

  .logoImg {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    transition: background-color 0.3s linear;

    @media (any-hover: hover) {
      &:hover {
        background-color: var(--fill1);
      }
    }

    .logoPlaceHolder {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: 32px;
      &.placeholderMobile {
        padding-top: 16px;
      }
      span {
        margin-top: 8px;
        font-size: 12px;
        color: var(--fourthLevelText);
      }
    }

    .editBtn {
      top: 44px;
      left: 44px;
      &.editBtnMobile {
        left: 24px;
        top: 24px;
      }
    }

    @media (any-hover: hover) {
      &:hover .editBtn {
        display: flex;
      }
    }
  }

  img {
    width: 100%;
    height: 100%;
    border-radius: 8px;
  }
}